<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 如果以后是模块化编程  Vue.proptotype.$VueRouter = VueRouter

        // 路由范式
        // http://127.0.0.1:8080/index/user
        // http://127.0.0.1:8080/user/1
        // http://127.0.0.1:8080/user?user_id = 1
        const User = {
            data() {
                return {

                }
            },
            template: `
                <div>我是用户</div>
            `
        };

        // 创建并定义路由
        const router = new VueRouter({
            // 定义路由规则
            // mode: 'history',
            routes: [{
                path: '/user/:id',
                name: 'User',
                component: User
            }]
        });

        let App = {
            data() {
                return {

                }
            },
            // router-link 和 router-view 是vue-router提供的两个全局组件
            // router-link渲染的时候, 浏览器会自动渲染成a标签, to属性会渲染成href属性
            // router-view 是路由组件的出口, 定义组件渲染的位置
            template: `
                <div>
                    <div class="header">
                        <router-link :to='{name:"User", params:{id:1}}'>用户1</router-link>
                        <router-link :to='{name:"User", params:{id:2}}'>用户2</router-link>
                    </div>
                    <router-view></router-view>
                </div>
            `
        };

        new Vue({
            el:'#app',
            data() {
                return {

                }
            },
            // 模板
            template: `
                <App />
            `,
            // 挂载组件
            components: {
                App
            },
            // 挂载路由对象, router是属性, key和vaule一样的话可以省略, router:router ==> 省略成 router
            router
        });
    </script>
</body>
</html>